<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Authorization Interface</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container" id="authContainer">
        <h2>Authorization Interface</h2>
        <div class="auth-type">
            <button class="auth-btn active" onclick="switchAuthType('admin')">Admin Login</button>
        </div>
        <input type="password" id="passwordInput" placeholder="Enter Password">
        <button onclick="checkPassword()">Access</button>
        <p id="message"></p>
        <!-- 用于显示主内容的div -->
        <div id="mainContent" class="hidden">
            <!-- 主内容将在这里动态加载 -->
        </div>
    </div>

    <script>
        function checkPassword() {
            var password = document.getElementById('passwordInput').value;
            fetch('/verify-password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({password: password})
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('message').textContent = data.message;
                if (data.message === 'Access granted') {
                    // 加载主内容
                    fetch('/main_content.html')
                    .then(response => response.text())
                    .then(html => {
                        document.getElementById('mainContent').innerHTML = html;
                        document.getElementById('mainContent').classList.remove('hidden');
                    })
                    .catch(error => console.error('Error loading main content:', error));
                }
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>